<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>侧边栏</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    header {
      height: 80px;
      box-shadow: 0 0 10px rgb(0 0 0 / 10%);
      line-height: 80px;
      text-align: right;
    }

    button {
      padding: 8px 20px;
      background: #317aae;
      color: #fff;
      border: none;
      margin-right: 20px;
    }

    main {
      width: 800px;
      margin: 200px auto;
      text-align: center;
    }

    #app-sidebar {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 200px;
      background: rgba(0, 0, 0, 0.158);

      /* display: none; */
      /* visibility: hidden; */

      transform: translateX(-100%);
      transition: 0.2s;
    }

    #app-sidebar.show {
      transform: translateX(0);
    }

    li {
      height: 50px;
      line-height: 50px;
      text-indent: 20px;
      cursor: pointer;
    }

    li.highlighted {
      background: #317aae;
      color: #fff;
    }

    .copyright {
      width: 100%;
      position: absolute;
      bottom: 0;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-top: 1px solid #000;
    }
  </style>
</head>

<body>
  <header>
    <button id="btn-sidebar">侧边栏</button>
  </header>

  <main>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos necessitatibus consequatur eius nobis fugiat. Quo,
      obcaecati exercitationem magni odit in minima earum magnam velit odio architecto aliquid nulla porro ea.</p>
    <div>
      <button id="theme-btn-dark">切换暗黑主题</button>
      <button id="theme-btn-light">切换明亮主题</button>
    </div>
  </main>

  <aside id="app-sidebar" class="show">
    <ul>
      <li class="highlighted">Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
    </ul>
    <div class="copyright">© 2022</div>
  </aside>
  <script>
    /*
    1. 实现侧边栏的打开和关闭
    ● 网站中有一个 Sidebar 按钮。当您单击它时，就会调用 toggleSidebar 函数
    ● 请你完成 toggleSidebar 函数，将类 show 添加 到 id 为 app-sidebar 的元素中，下次调用 toggleSidebar 函数将类名 show 删除，从而实现侧边栏的打开和关闭状态
    */

    const sidebarBtn = document.querySelector('#btn-sidebar');
    const appSidebar = document.querySelector('#app-sidebar');
    sidebarBtn.onclick = toggleSidebar
    function toggleSidebar() {
      appSidebar.classList.toggle('show')
    }

    // 2. 实现侧边栏导航选项的高亮
    const oUl = document.querySelector('#app-sidebar ul')
    const aLi = document.querySelectorAll('#app-sidebar li')
    oUl.onclick = function (e) {
      const target = e.target
      if (target.tagName == 'LI') {
        for (let i = 0; i < aLi.length; i++) {
          aLi[i].classList.remove('highlighted')
        }
        target.classList.add('highlighted')
      }
    }

    // 3. 暗黑/明亮主题切换
    document.querySelector("#theme-btn-dark").onclick = function () {
      //调用
      switchMode({
        element: "body",
        isDarkMode: true,
      });
    };

    document.querySelector("#theme-btn-light").onclick = function () {
      //调用
      switchMode({
        element: "body",
        isDarkMode: false,
      });
    };

    /**
     * @description 完成风格的切换
     * @param {Object} mode 风格对象
     * @param {string} mode.element - 切换风格的 dom 元素  (css选择器)
     * @param {Boolean} mode.isDarkMode - 是否为暗黑风格
     */

    const switchMode = function (mode) {
      const ele = document.querySelector(mode.element);
      if (mode.isDarkMode) {
        // ele.style = 'background-color:#666; color:white;'
        ele.style.backgroundColor = '#666'
        ele.style.color = 'white'
      } else {
        ele.style = 'background-color:#white; color:black;'
      }
    };




  </script>
</body>

</html>